<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>作业</title>
		<style type="text/css">
			/*公共样式*/
			div,span,a,h1,h2,h3,h4,ul,li,p,a{margin: 0px;padding: 0px;}
			ul{list-style: none;}

			/*窗体大小1200*1200自动居中*/
			#container{
				width: 1200px;
				height: 1200px;
				margin: 0px auto;}

			/*顶部导航栏*/
			#topnav{
				width: 100%;height: 38px;background-color: #f5f5f5；padding:5px;
			}
			/*左对齐，红色，首页 注册 登陆*/
			#topnav ul li.left a{
				color: #7c7c7c;
				text-decoration: none;
				line-height: 38px;
				font-size: 12px;
				float: left;
				display: block;
				margin-right: 15px;
			}
			#topnav ul li.left a.red{color: red; padding-left:10px; }
			#topnav ul li.left a:hover{text-decoration-line:underline;}
			/*右对齐，购物车，积分商城，客服*/
			#topnav ul li.right a{
				color: #7c7c7c;
				text-decoration: none;
				line-height: 28px;
				font-size: 12px;
				float: right;
				display: block;
				margin-right: 15px;
			}
			/*购物车图标*/
			#topnav ul li.right a.icon{
				background: url("./images/icons.png") no-repeat 0px -91px;
				padding-left: 18px;
			}
			#topnav ul li.right a:hover{text-decoration:underline;}

			/*头部，显示首页大图*/
			#header{
				width: 1200px;
				height: 193px;
				margin-top: 5px;
				background-color: #ddd;
			}

			/*主导航栏*/
			#nav ul {
				width: 100%;
				height: 47px;
				background: #424965; 
			}
			#nav ul li a{
				color: #fff;
				float: left;
				text-decoration: none;
				line-height: 47px;
				font-size: 16px;
				font-weight: bold;
				text-align: center;
				padding: 0px 26px;
				display: block;
			}
			#nav ul li a:hover{background: #2b3047; text-decoration: underline;}
			#fenlei{background: #2b3047;}

			/*图片组合区域*/
			#jpg{width: 100%;height: 290px;background-color: #ddd;}
			/*左侧大图*/
			#jpg a div.a1{
			width: 687px;
			height: 280px;
			border: 1px solid red;
			float: left;
			margin: 5px;
			background-color: red;
			background-image: url("./images/1.jpg");
			background-repeat: no-repeat;
			background-position: center top;
			}
			/*中间三幅小图*/
			#jpg a div.a21{
				width: 195px;
				height: 92px;
				margin-top: 5px;
				float: left;
				background-image: url("./images/2-1.jpg");
				background-repeat: no-repeat;
				background-position: center top;
			}
			#jpg a div.a22{
				width: 195px;
				height: 92px;
				margin-top: 5px;
				float: left;
				background-image: url("./images/2-2.jpg");
				background-repeat: no-repeat;
				background-position: center top;
			}
			#jpg a div.a23{
				width: 195px;
				height: 92px;
				margin-top: 5px;
				float: left;
				background-image: url("./images/2-3.jpg");
				background-repeat: no-repeat;
				background-position: center top;
			}
			/*右侧两幅小图*/
			#jpg a div.a31{
				width: 276px;
				height: 93px;
				background-image: url("./images/3-1.jpg");
				margin-top: 8px;
				float: right;
				background-repeat: no-repeat;
				background-position: center top;
			}
			#jpg a div.a32{
				width: 284px;
				height: 167px;
				float: right;
				margin-top: 15px;
				background-image: url("./images/3-2.jpg");
				background-repeat: no-repeat;
				background-position: center top;
			}	

			/*主体区域*/
			#main{width: 100%;height: 350px;margin-top: 8px;background-color: #ddd;}
			/*左边栏，头，体，脚*/	
			#leftside{
				width: 200px;
				height: 346px;
				border:2px solid #2b3047;
				float: left;			
			}
			#leftside a{color: #222;text-decoration: none;}
			#leftside a:hover{color: #f00;text-decoration: underline;}
			#leftside .header{
				width: 200px;
				height: 30px;
				background:#414965;
			}
			#leftside span.head{
				color: #fff;
				font-size: 16px;
				font-weight: bold;
				line-height: 30px;
				padding: 0px 10px 0px 5px;
			}
			#leftside span{
				color: #7c7c7c;
				text-decoration: none;
				float: left;
				font-size: 12px;
				line-height: 18px;
				margin: 0px 2px 0px 13px;
			}
			#leftside span:hover{
				text-decoration: underline;
			}
			#leftside a.link{
				color: #a2a7cc;
				text-decoration: none;
				font-size: 12px;
			}
			#leftside a.link:hover{
				text-decoration: underline;
			}
			#leftside .footer{
				height: 56px;
				background: #6f7aa0;
				padding-right: 24px;
				text-align: center;
				line-height: 56px;
				color: red;
				font-size: 24px;
			}
			#leftside .footer:hover{
				text-decoration: underline;
			}
			/*右侧推荐区域*/
			#rightside{
				width: 980px;
				height: 350px;
				display: block;
				background-color: #ddd;
				float: right;
			}
			#rightside ul li.hot1{
				width: 290px;
				height: 350px;
				margin: 10px 1px 0px 10px;
				padding-left: 15px;
				display: block;
				float: left;
			}
			#rightside ul li.hot1 .text{
				padding: 0px 30px;
				width: 230px;
				height: 40px;
				font-size: 18px;
				background: #6b7494;
				line-height: 40px;
				text-align: center;
				color: #fff;
				left: 0px;
				display: block;	
			}
			#rightside ul li.hot1 .text:hover{color:red;text-decoration: underline;}

			/*底部链接*/
			#footer{
				width: 100%;
				height: 23px;
				margin-top: 15px;
				margin-left: 360px;
				color: #7c7c7c;
				display: block;
			}
			#footer ul.list{
				
				width: 738px;
				display: block;
			}
			#footer li.first a{
				float: left;
				padding-left: 8px;
				text-decoration: none;
				color: #7c7c7c;
				font-size: 12px;
				background: #fff;
			}
			#footer li.first a:hover{
				text-decoration: underline;
			}		
		</style>
	</head>
	<body>
		<div id="container">
			<div id="topnav">
				<ul>
					<li class="left">
						<a href="#" class="red">电影网首页</a>
						<a href="#">登陆</a>
						<a href="#">免费注册</a>
					</li>
					<li class="right">
						<a href="#">客户服务</a>
						<a href="#">积分商城</a>
						<a href="#" class="icon">购物车</a>
						<a href="#">我的电影网</a>
					</li>
				</ul>
			</div>
			<div id="header">
				<a href="#" target="_blank">
				<img src="./images/top.jpg"/>	
				</a>			
			</div>
			<div id="nav">
				<ul>
					<li><a href="#" id="fenlei">所有商品分类</a></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">热映影片</a></li>
					<li><a href="#">电影院</a></li>
					<li><a href="#">观影活动</a></li>
					<li><a href="#">电影周边</a></li>
					<li><a href="#">快速订票</a></li>
					<li><a href="#">约影</a></li>
				</ul>
			</div>
			<div id="jpg">
				<a href="#" target="_blank">
					<div class="a1"></div>
					<div>
						<div class="a21"></div>
						<div class="a31"></div>
						<div class="a22"></div>
						<div class="a32"></div>
						<div class="a23"></div>
					</div>
				</a>
			</div>
			<div id="main">
				<div id="leftside">
					<div class="header">
						<span class="head">正在热映</span>
						<a href="#" class="link">27部影片正在热映</a>				
					</div>
					<div class="content">
						</p></br>
						<h3>全家观影总动员</h3>
						<ul>
							<li>
								<a href="#"><span>动画</span></a>
								<a href="#"><span>家庭</span></a>
								<a href="#"><span>少儿</span></a>
							</li>
						</ul>
						</p></br>
						<h3>两个人的观影时光</h3>
						<ul>
							<li>
								<a href="#"><span>喜剧</span></a>
								<a href="#"><span>爱情</span></a>
							</li>
						</ul>
						</p></br>
						<h3>好友观影团</h3>
						<ul>
							<li>
								<a href="#"><span>动作</span></a>
								<a href="#"><span>惊悚</span></a>
								<a href="#"><span>剧情</span></a>
								<a href="#"><span>悬疑</span></a>
							</li>
						</ul>
						</p></br>
						<h3>随便看看</h3>
						<ul>
							<li>
								<a href="#"><span>冒险</span></a>
								<a href="#"><span>科幻</span></a>
								<a href="#"><span>纪录片</span></a>
								<a href="#"><span>战争</span></a>
							</li>
						</ul>							
					</div>
					</br></br>
					<div class="footer">快速购票入口></div>
				</div>
				<div id="rightside">
					<ul>
						<li class="hot1">
							<img src="./images/hot1.jpg" class="jpg" width="290" height="290" />
							<div class="text">
								<a href="#">碟中谍6：全面瓦解</a></div>
						</li>
						<li class="hot1">			
							<img src="./images/hot2.jpg" class="jpg"/>
							<div class="text">
								<a href="#">蚁人2：黄蜂女现身</a></div>
						</li>
						<li class="hot1">
							<img src="./images/hot3.jpg" class="jpg"/>
							<div class="text">
								<a href="#">西红柿首富</a></div>
						</li>						
					</ul>					
				</div>
			</div>
			<div id="footer">
				<ul class="list">
					<li class="first">
						<a href="#">公司简介 |</a>
						<a href="#">分支机构 |</a>
						<a href="#">联系我们 |</a>
						<a href="#">诚聘英才 |</a>
						<a href="#">杂志大全 |</a>
						<a href="#">报纸大全 |</a>
						<a href="#">用户营私协议</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>